<template>
  <div class="wrap">
		<scroll-view
      @scrolltolower="handleLoadMore"
      @refresherrefresh="handleRefresh"
      :refresher-triggered="scrollRefreshshTrigger"
      :refresher-enabled="true"
      :scroll-y="true"
      class="scroll-list">
      <div class="view-container">
        <uni-swipe-action class="swipe-list">
          <uni-swipe-action-item
            v-for="(item, index) in dataList"
            :key="index + '' + item.id"
            :right-options="actions"
            :show="item.isOpened"
            :auto-close="true"
            @change="change"
            @click="bindClick(item, $event)"
            @longpress.native="longpress"
            class="swipe-list-item"
          >
            <view class="view-row">
              <u-card @click="handleShowEdit(item, $event)"
                class="task-list-item" :border="false" padding="16" margin="20rpx">
                <view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
                  <view style="display: flex;align-items: center;font-size: 30rpx;">
                    {{ item.name }}
                  </view>
                  <view v-if="isShowCheckBox" class="row-check">
										<label @click.stop="handleCheck(item)">
											<checkbox value="cb" :checked="item.isChecked" />
										</label>
                  </view>
                </view>
                <view slot="body">
                  <view @longpress.native="longpress">
                    <u-row gutter="16">
                      <u-col span="12">
                        <view class="apply-text"><span>歌手：</span>{{ item.artist }}</view>
                        <view class="apply-text"><span>地址：</span>{{ item.url }}</view>
                        <view class="apply-text"><span>添加时间：</span>{{ item.createTime }}</view>
                        <view class="apply-text"><span>更新时间：</span>{{ item.updateTime }}</view>
                      </u-col>
                    </u-row>
                  </view>
                </view>
              </u-card>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
        <u-divider>已经到底了</u-divider>
      </div>
    </scroll-view>
    <div v-if="isShowCheckBox" class="footer-fixed">
			<radio-group>
				<label @click="handleCheckAll" class="btn-checkbox"><radio value="all" :checked="isCheckAll" />全选</label>
			</radio-group>
			<view class="btns">
				<u-button @click="handleDelete" class="btn-delete" type="error">删除</u-button>
				<u-button @click="handleCancel" class="btn-cancel" type="default">取消</u-button>
			</view>
    </div>
  </div>
</template>

<script>
import { treer, objecter, loger } from '@daelui/dogjs/dist/components.js'
import ebus from '@/components/libs/ebus.js'
import uniFiler from '@/components/libs/uni-filer.js'
import muSer from '@/api/service/music.js'

export default {
  data () {
    return {
			current: 0,
      actions: [
        {
          text: '删除',
          style: {
            backgroundColor: '#F56C6C'
          }
        }
      ],
      // 下拉刷新标识
      scrollRefreshshTrigger: false,
      // 数据列表
      dataList: [],
      // 分页参数
      pager: {
        total: 0,
        pageCount: 0,
        pageIndex: 1,
        pageSize: 20
      },
      // 是否显示多选
      isShowCheckBox: false,
			// 是否全选
			isCheckAll: true
    }
  },

  onNavigationBarButtonTap(arg) {
    // 上传
    if (arg.category === 'insert') {
      this.handleShowInsert()
    }
  },

  onShow () {
    this.isShowCheckBox = false
    this.initView()
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.initView()
    setTimeout(function(){
      uni.stopPullDownRefresh()
    }, 1000)
  },

  methods: {
    initView () {
      let curParam = this.getParams()
      // 有来源则隐藏上传按钮
      if (curParam.localRowId) {
        // 隐藏头部按钮
        var webView = this.$mp.page.$getAppWebview()
        webView.setTitleNViewButtonStyle(0, {
          width: '0'
        })
      }
      // 初始化数据列表
      this.handleSearch()
    },
    // 初始化数据列表
    loadDataList () {
      let user = this.getCurrentUser() || {}
      let params = {
        userId: user.userId
      }
      // 查询数据列表
      muSer.queryListByPage(params, {
        limit: { pageIndex: this.pageIndex, pageSize: this.pageSize }
      }).then((res) => {
				// 选中列表
				this.checkList(res.data)
        this.dataList = this.dataList.concat(res.data)
        this.pager.total = res.page?.total || 0
        this.pager.pageCount = Math.ceil(this.pager.total / this.pager.pageSize)
      })
    },
    // 搜索数据
    handleSearch () {
      this.pager.pageIndex = 1
      this.dataList = []
      // 查询列表数据
      this.loadDataList()
    },
    // 下拉刷新
    handleRefresh () {
      this.scrollRefreshshTrigger = true
      this.handleSearch()
      setTimeout(() => {
        this.scrollRefreshshTrigger = false
      }, 1000)
    },
    // 加载更多
    handleLoadMore () {
      this.pager.pageIndex += 1
      if (this.pager.pageIndex > this.pager.pageCount) {
        return true
      }
      this.loadDataList()
    },
		onClickItem(index) {
      this.current = index
      this.handleSearch()
      this.handleCancel()
    },
    // 添加
    handleShowInsert () {
      let curParam = this.getParams() // 获取参数
      delete curParam.id
      let query = this.createQuery(curParam)
      uni.navigateTo({
        url: '/pages/music/edit?' + query
      })
    },
    // 编辑
    handleShowEdit (item, e) {
      let curParam = this.getParams() // 获取参数
      curParam.id = item.id || ''
      let query = this.createQuery(curParam)
      uni.navigateTo({
        url: '/pages/music/edit?' + query
      })
    },
    // 长按
    longpress (item) {
      this.isShowCheckBox = true
			// 选中列表
      this.checkList(this.dataList)
    },
		// 选中列表
		checkList (list) {
			list = Array.isArray(list) ? list : []
			// 选择模式下自动选中
			if (this.isShowCheckBox) {
				list.forEach(item => {
					Object.assign(item, { isChecked: true })
				})
				this.isCheckAll = true
			}
		},
    change(e) {},
    bindClick(item, e) {
      if (e.index === 0) {
        // 删除
        this.deleteItems([item])
      }
    },
    // 选择
    handleCheck (item) {
			Object.assign(item, { isChecked: !item.isChecked })
			// 是否有未选中的
			let node = this.dataList.find(item => !item.isChecked)
			if (node) {
				this.isCheckAll = false
			} else {
				this.isCheckAll = true
			}
		},
		// 全选
		handleCheckAll () {
			this.isCheckAll = !this.isCheckAll
      this.dataList.forEach(item => {
        Object.assign(item, { isChecked: this.isCheckAll })
      })
		},
    // 多选删除
    handleDelete () {
      let checkList = this.dataList.filter(item => {
        return item.isChecked
      })
      if (!checkList.length) {
        this.$u.toast('请选择数据')
        return false
      }
      this.deleteItems(checkList)
    },
    // 取消
    handleCancel () {
      this.isShowCheckBox = false
      this.dataList.forEach(item => {
        delete item.isChecked
      })
    },
    // 删除数据
    deleteItems (list) {
      // 删除
      uni.showModal({
      	title: '提示',
      	content: '确认删除吗?',
      	success: (res) => {
      		if (res.confirm) {
            muSer.delete(list, { isDeleteImage: true }).then(() => {
              this.handleSearch()
            })
            ebus.$emit('onUpdateInsDisCount')
            this.isShowCheckBox = false
      		}
      	}
      })
    }
  }
}
</script>

<style lang="scss">
.wrap {
  overflow: hidden;
  height: 100%;
  background: #f5f5f5;
  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom));
  }
}
.view-container {
  box-sizing: border-box;
  padding-bottom: 186px;
  min-height: 50vh;
  /deep/ .uni-swipe_button {
    margin: 20rpx 0;
  }
  .swipe-list-item + .swipe-list-item {
    margin-top: -20rpx;
  }
  .view-row {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .task-list-item {
    flex: 1;
  }
  .row-check {
    padding-left: 10px;
    /deep/ .u-checkbox__label {
      display: none;
    }
  }
  .apply-text {
    font-size: 28rpx;
    color: #333333;
    span{
      color: #999999;
    }
  }
	/deep/ .uni-checkbox-input-checked {
		color: #fff !important;
		background: rgb(0, 122, 255);
	}
}
.is-update {
  &:before {
    content: '修改';
    position: absolute;
    right: 0;
    top: 4px;
    font-size: 12px;
    color: #f29100;
    transform: rotate(45deg) scale(0.7);
  }
}
.is-insert {
  position: relative;
  &:before {
    content: '新增';
    position: absolute;
    right: 0;
    right: 0;
    top: 4px;
    font-size: 12px;
    color: #f29100;
    transform: rotate(45deg) scale(0.7);
  }
}
.footer-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  background: #fff;
  border-top: 1px #ebeef5 solid;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn-checkbox {
    display: flex;
    align-items: center;
  }
  .btns {
    display: flex;
    justify-content: space-between;
    width: 70%;
  }
  .btn-upload,.btn-delete,.btn-cancel {
    width: 31%;
  }
}
</style>
